<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const goHome = () => {
  router.push('/')
}
</script>

<template>
  <div class="container">
    <div class="error-content">
      <!-- 404数字展示 -->
      <h1 class="error-code">404</h1>

      <!-- 错误提示 -->
      <div class="error-message">
        <h2 class="animate-fade">页面未找到</h2>
        <p>看起来你迷路了...<br>可能这个页面已被移除或暂时不可用</p>
      </div>

      <!-- 交互按钮 -->
      <button @click="goHome" class="home-button">
        返回首页
        <svg class="arrow" viewBox="0 0 16 16" fill="currentColor">
          <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
        </svg>
      </button>

      <!-- 可选的装饰性图片 -->
      <img
          src="https://cdn-icons-png.flaticon.com/512/2748/2748558.png"
          alt="error illustration"
          class="error-image"
      />
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 2rem;
}

.error-content {
  text-align: center;
  max-width: 600px;
  position: relative;
}

.error-code {
  font-size: 12rem;
  color: #2c3e50;
  margin: 0;
  line-height: 1;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  opacity: 0.9;
}

.error-message {
  margin: 2rem 0;
}

.error-message h2 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.error-message p {
  color: #6c757d;
  line-height: 1.6;
}

.home-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11);
}

.home-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1);
}

.arrow {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.2s ease;
}

.home-button:hover .arrow {
  transform: translateX(3px);
}

.error-image {
  width: 200px;
  margin-top: 2rem;
  opacity: 0.8;
  filter: grayscale(30%);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade {
  animation: fadeInUp 0.6s ease-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-code {
    font-size: 8rem;
  }

  .error-message h2 {
    font-size: 1.5rem;
  }

  .error-image {
    width: 150px;
  }
}
</style>